<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>航线对比分享页</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <!--以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" href="asset/plugins/jquery-weui/lib/weui.css">
    <link rel="stylesheet" href="asset/plugins/jquery-weui/css/jquery-weui.css">
    <link rel="stylesheet" href="asset/plugins/iconfont/iconfont.css">
    <link rel="stylesheet" href="asset/css/p-contrast.css">
    <script type="text/javascript" src="asset/plugins/rem2px/hd_adapter_rem2px.js"></script>
</head>
<body>
<header class="m-page_header">
    <h1 class="m-header_title">航线对比</h1>
    <a href="javascript:;" class="p-btn-share"><i class="iconfont icon-fenxiang"></i></a>
</header>
<div class="l-container">
    <!--start 邮轮公司-->
    <div class="weui-flex p-contrast-group--main p-contrast-company g-mb--10">
        <div class="weui-flex__item p-contrast_header"><h2 class="m-group_title">邮轮公司</h2></div>
        <div class="weui-flex__item p-contrast_content">
            <p class="p-company-logo"><img src="asset/images/contrast-logo01.jpg" alt="logo"></p>
        </div>
        <div class="weui-flex__item p-contrast_content">
            <p class="p-company-logo"><img src="asset/images/contrast-logo02.jpg" alt="logo"></p>
        </div>
    </div>
    <!--start 邮轮名-->
    <div class="weui-flex p-contrast-group--side p-contrast-ship g-mb--20">
        <div class="weui-flex__item p-contrast_header"><h3 class="m-group_title">邮轮名</h3></div>
        <div class="weui-flex__item p-contrast_content">
            <div class="p-content_inner"><p>歌诗达邮轮塞丽娜号</p></div>
        </div>
        <div class="weui-flex__item p-contrast_content">
            <div class="p-content_inner"><p>皇家加勒比海洋量子号</p></div>
        </div>
    </div>
    <!--start 邮轮信息-->
    <div class="m-group-striped">
        <div class="weui-flex p-contrast-group--base">
            <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">首航</h4></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner"><p>2007年</p></div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner"><p>2014年</p>
                <span class="p-contrast-better"><i
                        class="iconfont icon-dianzan"></i></span>
                </div>
            </div>
        </div>
        <div class="weui-flex p-contrast-group--base">
            <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">载客量</h4></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner"><p>3780人</p></div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner"><p>4180人</p>
                <span class="p-contrast-better"><i
                        class="iconfont icon-dianzan"></i></span>
                </div>
            </div>
        </div>
        <div class="weui-flex p-contrast-group--base">
            <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">甲板层数</h4></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner"><p>14层</p></div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner"><p>16层</p></div>
            </div>
        </div>
        <div class="weui-flex p-contrast-group--base">
            <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">吨位</h4></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner"><p>114,500吨</p></div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <p>168,666吨 </p>
                    <span class="p-contrast-better"><i class="iconfont icon-dianzan"></i></span>

                </div>
            </div>
        </div>
    </div>
    <!--end 邮轮信息-->
    <!--start 特色-->
    <div class="weui-flex p-contrast-group--side g-mb--20">
        <div class="weui-flex__item p-contrast_header"><h3 class="m-group_title">特色</h3></div>
        <div class="weui-flex__item p-contrast_content">
            <div class="p-content_inner">
                <p>歌诗达邮轮塞丽娜号</p>
                <p>多彩意式娱乐</p>
                <p>船上通讯App</p>
                <p>海上最大水疗中心</p>
                <p>地道意式美食</p>
            </div>
        </div>
        <div class="weui-flex__item p-contrast_content">
            <div class="p-content_inner">
                <p>最高科技邮轮</p>
                <p>表演最有新意</p>
                <p>海上亲子乐园</p>
                <p>世界顶级大厨</p>
            </div>

        </div>
    </div>
    <!--end 特色-->
    <!--start 出行世界&舱房价格-->
    <div class="m-group-striped p-striped-room g-mb--20">
        <div class="weui-flex p-contrast-group--base">
            <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">出行时间</h4></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner p-dropdown js-dropdown-select-time">
                    <p><span>2017-07-20</span>
                        <span class="p-selected-icon"><i class="iconfont icon-unfold"></i></span>
                    </p>
                    <div class="p-dropdown-inner">
                        <ul class="p-dropdown-menu">
                            <li class="active"><a href="javascript:;">2017-07-01</a></li>
                            <li><a href="javascript:;">2017-07-02</a></li>
                            <li><a href="javascript:;">2017-07-03</a></li>
                            <li><a href="javascript:;">2017-07-04</a></li>
                            <li><a href="javascript:;">2017-07-05</a></li>
                            <li><a href="javascript:;">2017-07-06</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner p-dropdown js-dropdown-select-time">
                    <p><span>2017-07-20</span>
                        <span class="p-selected-icon"><i class="iconfont icon-unfold"></i></span>
                    </p>
                    <div class="p-dropdown-inner">
                        <ul class="p-dropdown-menu">
                            <li class="active"><a href="javascript:;">2017-07-01</a></li>
                            <li><a href="javascript:;">2017-07-02</a></li>
                            <li><a href="javascript:;">2017-07-03</a></li>
                            <li><a href="javascript:;">2017-07-04</a></li>
                            <li><a href="javascript:;">2017-07-05</a></li>
                            <li><a href="javascript:;">2017-07-06</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-flex p-contrast-group--base">
            <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">内舱房</h4></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner"><p>2499起<small>600每天/人</small></p></div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <p>2499起<small>600每天/人</small></p>
                    <span class="p-contrast-better"><i class="iconfont icon-dianzan"></i></span>
                </div>
            </div>
        </div>
        <div class="weui-flex p-contrast-group--base">
            <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">海景房</h4></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <p>2499起<small>600每天/人</small></p>
                    <span class="p-contrast-better"><i class="iconfont icon-dianzan"></i></span>
                </div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <p>2499起<small>600每天/人</small></p>

                </div>
            </div>
        </div>
        <div class="weui-flex p-contrast-group--base">
            <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">阳台房</h4></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <p>2499起<small>600每天/人</small></p>
                    <span class="p-contrast-better"><i class="iconfont icon-dianzan"></i></span>
                </div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <p>2499起<small>600每天/人</small></p>

                </div>
            </div>
        </div>
        <div class="weui-flex p-contrast-group--base">
            <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">套房</h4></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner"><p>2499起<small>600每天/人</small></p></div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <p>2499起<small>600每天/人</small></p>
                    <span class="p-contrast-better"><i class="iconfont icon-dianzan"></i></span>
                </div>
            </div>
        </div>
    </div>
    <!--end 出行世界&舱房价格-->
    <!--start 行程路线-->
    <div class="weui-flex p-contrast-group--main g-mb--10">
        <div class="weui-flex__item p-contrast_header"><h2 class="m-group_title">行程路线</h2></div>
        <div class="weui-flex__item p-contrast_content">
            <div class="p-content_inner">
                <p class="p-content_img"><img src="asset/images/contrast-logo01.jpg" alt="logo"></p>
                <p>5天4晚</p>
            </div>
        </div>
        <div class="weui-flex__item p-contrast_content">
            <div class="p-content_inner">
                <p class="p-content_img"><img src="asset/images/contrast-logo02.jpg" alt="logo"></p>
                <p>7天6晚</p>
            </div>
        </div>
    </div>
    <!--end 行程路线-->
    <!--start 行程时间-->
    <div class="g-mb--20">
        <div class="weui-flex p-contrast-group--base p-contrast-group--condensed">
            <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">出发时间</h4></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <p>07-20 韩国，济州 13:00到港
                    </p>
                </div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <p>07-20 韩国，济州 13:00到港
                    </p>
                </div>
            </div>
        </div>
        <div class="weui-flex p-contrast-group--side p-contrast-group--condensed p-trip-time js-trip-time">
            <div class="weui-flex__item p-contrast_header"><h3 class="m-group_title">行程</h3></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <div class="p-text-group">
                        <span class="p-text_item">07-20 韩国，济州</span>
                        <span class="p-text_item">
                            <b>13:00到港</b>
                            <b>20:00起航</b>
                        </span>
                    </div>
                    <div class="p-text-group">
                        <span class="p-text_item">07-20 韩国，济州</span>
                        <span class="p-text_item">
                            <b>13:00到港</b>
                            <b>20:00起航</b>
                        </span>
                    </div>

                </div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <div class="p-text-group">
                        <span class="p-text_item">07-20 韩国，济州</span>
                        <span class="p-text_item">
                            <b>13:00到港</b>
                            <b>20:00起航</b>
                        </span>
                    </div>
                    <div class="p-text-group">
                        <span class="p-text_item">07-20 韩国，济州</span>
                        <span class="p-text_item">
                            <b>13:00到港</b>
                            <b>20:00起航</b>
                        </span>
                    </div>
                    <div class="p-text-group">
                        <span class="p-text_item">07-20 韩国，济州</span>
                        <span class="p-text_item">
                            <b>13:00到港</b>
                            <b>20:00起航</b>
                        </span>
                    </div>
                    <div class="p-text-group">
                        <span class="p-text_item">07-20 韩国，济州</span>
                        <span class="p-text_item">
                            <b>13:00到港</b>
                            <b>20:00起航</b>
                        </span>
                    </div>
                    <div class="p-text-group p-text-toggle js-text-toggle">
                        <p>全部行程<span class="p-selected-icon"><i class="iconfont icon-unfold"></i></span></p>
                    </div>
                </div>

            </div>
        </div>
        <div class="weui-flex p-contrast-group--base p-contrast-group--condensed">
            <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">返航时间</h4></div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <p>07-20 中国，上海 13:00到港
                    </p>
                </div>
            </div>
            <div class="weui-flex__item p-contrast_content">
                <div class="p-content_inner">
                    <p>07-20 中国，上海 13:00到港
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--end 行程时间-->
    <!--start 天数-->
    <div class="weui-flex p-contrast-group--base">
        <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">海上天数</h4></div>
        <div class="weui-flex__item p-contrast_content">
            <div class="p-content_inner">
                <p>2天</p>
            </div>
        </div>
        <div class="weui-flex__item p-contrast_content">
            <div class="p-content_inner">
                <p>1天</p>
            </div>
        </div>
    </div>
    <div class="weui-flex p-contrast-group--base">
        <div class="weui-flex__item p-contrast_header"><h4 class="m-group_title">陆地天数</h4></div>
        <div class="weui-flex__item p-contrast_content">
            <div class="p-content_inner">
                <p>3天</p>
            </div>
        </div>
        <div class="weui-flex__item p-contrast_content">
            <div class="p-content_inner">
                <p>4天</p>
            </div>
        </div>
    </div>
    <!--end 天数-->
</div>
<script type="text/javascript" src="asset/plugins/jquery-weui/lib/jquery-2.1.4.js"></script>
<script type="text/javascript" src="asset/plugins/jquery-weui/js/jquery-weui.min.js"></script>
<script>
    $(function () {
        /*出行时间选择*/
        function stopFunc(e) {
            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
        }
        $(document).on('click',function (e) {
            $(".p-dropdown-inner").hide();
            console.log("document");
        });
        $(".js-dropdown-select-time").on('click',function (e) {

            var $dropdown_inner=$(this).find(".p-dropdown-inner");
            if($dropdown_inner.is(":hidden")){
                $dropdown_inner.show();
            }else{
                $dropdown_inner.hide();
            }
            stopFunc(e);
        });
        $(".p-dropdown-inner").on('click','a',function (e) {
            var $this_li=$(this).parent('li');
            var time=$(this).text();
            var $time_input=$(this).closest(".js-dropdown-select-time").find("p>span:first");
            $this_li.addClass("active").siblings('li').removeClass("active");
            $time_input.text(time);
//            stopFunc(e);
        });
        /*全部行程的切换*/
        function moreHide(){
            var $text_group_01=$(".js-trip-time").find(".p-contrast_content").eq(0).find(".p-text-group");
            var $text_group_02=$(".js-trip-time").find(".p-contrast_content").eq(1).find(".p-text-group");
            var text_group_01_num=$text_group_01.length;
            var text_group_02_num=$text_group_02.length-1;
//            var num1=ele1.length;
//            var num2=ele2.length;
            if(text_group_01_num<3 && text_group_02_num<3){
                $('.js-text-toggle').hide();
            }
            for(var i=2;i<text_group_01_num;i++){
                $text_group_01.eq(i).hide();
            }
            for(var a=2;a<text_group_02_num;a++){
                $text_group_02.eq(a).hide();
            }
        }
        moreHide();
        $(".js-trip-time").on('click','.js-text-toggle',function () {
            var $trip_time=$(this).closest('.js-trip-time');
            var text_group_01=$trip_time.find(".p-contrast_content").eq(0).find(".p-text-group");
            var text_group_02=$trip_time.find(".p-contrast_content").eq(1).find(".p-text-group");
            var $iconfont=$(this).find(".iconfont");
            if($iconfont.hasClass("icon-unfold")){
                text_group_01.show();
                text_group_02.show();
                $(this).find(".iconfont").removeClass("icon-unfold").addClass("icon-packup");
            }else{
                $(this).find(".iconfont").removeClass("icon-packup").addClass("icon-unfold");
                moreHide();
            }
        });
    });
</script>
</body>
</html>